<template>
    <div class="detail">
        <div class="detail_tit">
            <p class="allow_left" @click="back"><van-icon name="arrow-left"></van-icon></p>
            <div class="tit_end">
                <van-icon name="weapp-nav"></van-icon>
                <van-icon name="replay"></van-icon>
            </div>
        </div>
        <div class="detail_Swiper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <img src="../../images/xhl.jpg" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="detail_page">
            <h2 class="page_title">{{`${detail.detailDatum.house_title}${detail.detailDatum.bedroom_count}${detail.detailDatum.total_price}${detail.detailDatum.acreage}${detail.detailDatum.house_type}`}}<span>VR</span></h2>
            <h3 class="page_price">{{detail.detailDatum.total_price}}&emsp;{{detail.detailDatum.bedroom_count}}&emsp;{{detail.detailDatum.acreage}}</h3>
            <div class="house_infos">
                <h1 class="info_tit">房源信息</h1>
                <van-grid :column-num="3" :border="false" :center="false">
                    <van-grid-item v-for="(v,i) in houses.infos" :key="i">
                        <dl class="info_Tags">
                            <dt>{{v.tit}}</dt>
                            <dd>{{v.cont}}</dd>
                        </dl>
                    </van-grid-item>
                </van-grid>
            </div>
            <div class="house_feature">
                <h1 class="feature_tit">房源特色</h1>
                <div class="main_buy" v-for="(v,i) in houses.feature " :key="i">
                    <p class="main_tit"><i class="tit_color"></i><span>{{v.tit}}</span></p>
                    <p class="main_cont">{{v.cont}}</p>
                </div>
            </div>
            <div class="house_plots">
                <div class="plots_tit">
                    <h1 class="plot_tag">{{detail.detailDatum.house_title}}</h1>
                    <p class="plot_det" @click="plotCont">小区详情<van-icon name="arrow"></van-icon></p>
                </div>
                <dl class="plot_cont">
                    <dt><img src="../../images/xhl.jpg" alt=""></dt>
                    <dd>
                        <p><span>参考均价</span>{{detail.detailDatum.per_price}}</p>
                        <p><span>比 上 月</span>持平</p>
                        <p><span>小区地址</span>{{detail.detailDatum.address}}</p>
                    </dd>
                </dl>
                <p class="bestPlot">查看同小区1套在售房源<van-icon name="arrow"></van-icon></p>
            </div>
        </div>
        <div class="detail_Tagbar"></div>
    </div>
</template>

<script lang='ts'>
    import {useRoute} from 'vue-router'
import { defineComponent, reactive } from 'vue'
import LoginVue from '../login/Login.vue';
import {useRouter} from 'vue-router'
export default defineComponent({
  setup(props,context) {
    const route = useRoute()
    console.log(route,'use');
    let router = useRouter();
    const detail = reactive({
        detailDatum:JSON.parse(localStorage.getItem('detailDatum')),
    })

    const houses = reactive({
        infos:[
            {
                "tit":"单价",
                "cont":detail.detailDatum.per_price
            },
            {
                "tit":"朝向",
                "cont":"南"
            },
            {
                "tit":"装修",
                "cont":detail.detailDatum.house_type
            },
            {
                "tit":"楼层",
                "cont":"高层/18层"
            },
            {
                "tit":"类型",
                "cont":detail.detailDatum.bedroom_count
            },
            {
                "tit":"更新",
                "cont":"19分钟前"
            }
        ],
        feature:[
            {
                "tit":"核心卖点",
                "cont":"原始装修 三室两厅一卫 客厅朝阳两卧室朝阳楼层好 苏外名额没用 各出各税"
            },
            {
                "tit":"业主心态",
                "cont":"业主诚心出售此房，积极配合看房和达成协议后的各项手续。产权清晰无纠纷，看房方便，房主诚意出售"
            },
            {
                "tit":"服务介绍",
                "cont":"我从事房产工作已有多年，经验丰富。1:能够精准地根据每一位客户的详细需求匹配到性价比合适的。2:和业主议价是我的强项，让每位客户真正的省钱。3:我们的服务能让您物超所值。4:您的买房安家之旅，让您更加 安心 放心 省心"
            }
        ]
    })

    const back = () => {
        router.go(-1)
    }

    console.log(detail.detailDatum);
    
      return {    
        detail,
        houses, 
        back     
      }
  },
})
</script>

<style lang='less' scoped>
.detail{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    flex: 1;
    overflow-y: auto;
    .detail_tit{
        width: 100%;
        height: 50px;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        z-index: 999;
        .allow_left{
            width: 36px;
            height: 36px;
            background: rgba(48, 46, 46, 0.5);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: #fff;
        }
        .tit_end{
            width: 80px;
            height: 30px;
            padding: 0 12px;
            border-radius: 40px;
            display: flex;
            align-items: center;
            background: rgba(236, 231, 231, 0.2);
            justify-content: space-between;
            i{
                color: #000;
                font-size: 20px;
            }
        }
    }
    .detail_Swiper{
        width: 100%;
        height: 220px;
        .van-swipe{
            width: 100%;
            height: 100%;
        }
        .my-swipe .van-swipe-item {
            width: 100%;
            height: 100%;
            color: #fff;
            font-size: 20px;
            line-height: 150px;
            text-align: center;
            background-color: #39a9ed;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .detail_page{
        width: 100%;
        height: auto;
        padding: 16px;
        .page_title{
            font-size: 18px;
            line-height: 30px;
            span{
                display: inline-block;
                width: 70px;
                height: 25px;
                background: none;
                border: 1px solid #000;
                text-align: center;
                line-height: 25px;
                margin-left: 20px;
                font-size: 13px;
            }
        }
        .page_price{
            color: #ea787f;
            font-size: 15px;
            margin-top: 20px;
            font-weight: bold;
        }
        .house_infos{
            width: 100%;
            height: auto;
            border-bottom: 1px solid #f8f6f7;
            .info_tit{
                font-size: 20px;
                font-weight: bold;
                margin-top: 30px;
            }
            .info_Tags{
                dt{
                    color: #aeaeae;
                    font-size: 13px;
                    margin-bottom: 15px;
                }
                dd{
                    font-size: 16px;
                }
            }
        }
        .house_feature{
            width: 100%;
            height: auto;
            .feature_tit{
                font-size: 20px;
                font-weight: bold;
                margin-top: 10px;
            }
            .main_buy{
                margin-top: 18px;
                width: 100%;
                height: auto;   
                .main_tit{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    .tit_color{
                        width: 3px;
                        height: 13px;
                        display: inline-block;
                        background: #e96d70;
                        margin-right: 6px;
                              
                    }
                    span{
                        font-size: 14px;
                        font-weight: bold;
                        color: #000;
                    }
                }
                .main_cont{
                    margin-top: 12px;
                    font-size: 14px;
                    color: #909090;
                    line-height: 24px;
                }
            }
        }
        .house_plots{
                width: 100%;
                height: auto;
                margin-top: 100px;
                .plots_tit{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .plot_tag{
                        font-size: 20px;
                        font-weight: bold;
                    }
                    .plot_det{
                        color: #afafb0;
                        font-size: 14px;
                    }
                    
                    
                }
                .plot_cont{
                    width: 100%;
                    display: flex;
                    height: 80px;
                    margin-top: 25px;
                    align-items: center;
                    dt{
                        width: 80px;
                        height: 100%;
                        margin-right: 10px;
                        img{
                            width: 100%;
                            height: 100%;
                            
                        }
                    }
                    dd{
                        flex: 1;
                        line-height: 30px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        
                        p{
                            font-weight: bold;
                            font-size: 14px;
                            color: #e28081;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            span{
                                font-weight: normal;
                                color: #a2a2a2;
                                margin-right: 10px;
                            }
                        }
                    }
                }
                .bestPlot{
                    font-size: 14px;
                    color: #e0a0a4;
                    width: 100%;
                    text-align: center;
                    margin-top: 25px;
                }
        }
    }
    .detail_Tagbar{
        width: 100%;
        height: 50px;
        border: 1px solid #ccc;
    }
}
</style>
